<page-header title="组合详情" [breadcrumb]="breadcrumb" [action]="action" [back]="true">
    <ng-template #breadcrumb>
        <ql-breadcrumb>
            <ql-breadcrumb-item>产品管理</ql-breadcrumb-item>
            <ql-breadcrumb-item>产品组合</ql-breadcrumb-item>
            <ql-breadcrumb-item>组合详情</ql-breadcrumb-item>
        </ql-breadcrumb>
    </ng-template>
    <ng-template #action>
        <ql-button type="primary" [routerLink]="['/product/combo-create', { id: id }]">修改</ql-button>
    </ng-template>
</page-header>

<tab-container>
    <tab-item title="产品组合详情信息展示">
        <ql-card header="产品组合基本信息">
            <label-container column="3" [border]="true" labelWidth="110">
                <label-item label="产品组合名称">{{groupData?.groupname}}</label-item>
                <label-item label="产品组合代码">{{groupData?.groupcode}}</label-item>
                <label-item label="预期收益">{{groupData?.expectminratio}}</label-item>
            </label-container>
            <label-container column="1" [border]="true" labelWidth="110">
                <label-item label="产品组合介绍">{{groupData?.desc}}</label-item>
            </label-container>
        </ql-card>
        <ql-card header="产品详细产品">
            <ql-collapse [accordion]="true">
                <!--<ql-collapse-item label="存款" value="1">-->
                    <!--<label-container column="3" [border]="true" labelWidth="110">-->
                        <!--<label-item label="产品名称">金葵存款</label-item>-->
                        <!--<label-item label="产品代码">C119A00</label-item>-->
                        <!--<label-item label="份数">1</label-item>-->
                    <!--</label-container>-->
                <!--</ql-collapse-item>-->
                <!--<ql-collapse-item label="贷款" value="2">-->
                    <!--<label-container column="3" [border]="true" labelWidth="110">-->
                        <!--<label-item label="产品名称">金葵贷款</label-item>-->
                        <!--<label-item label="产品代码">C119A00</label-item>-->
                        <!--<label-item label="份数">1</label-item>-->
                    <!--</label-container>-->
                <!--</ql-collapse-item>-->
                <!--<ql-collapse-item label="资管" value="3">-->
                    <!--<label-container column="3" [border]="true" labelWidth="110">-->
                        <!--<label-item label="产品名称">黄金资管</label-item>-->
                        <!--<label-item label="产品代码">C119A00</label-item>-->
                        <!--<label-item label="份数">3</label-item>-->
                    <!--</label-container>-->
                <!--</ql-collapse-item>-->
                <!--<ql-collapse-item label="理财" value="4">-->
                    <!--<label-container column="3" [border]="true" labelWidth="110">-->
                        <!--<label-item label="产品名称">金葵理财</label-item>-->
                        <!--<label-item label="产品代码">H119A00</label-item>-->
                        <!--<label-item label="份数">1</label-item>-->
                    <!--</label-container>-->
                <!--</ql-collapse-item>-->
                <!--<ql-collapse-item label="黄金" value="5">-->
                    <!--<label-container column="1" [border]="true" labelWidth="110">-->
                        <!--<label-item label="黄金产品">无</label-item>-->
                    <!--</label-container>-->
                <!--</ql-collapse-item>-->
                <!--<ql-collapse-item label="国债" value="6">-->
                    <!--<label-container column="1" [border]="true" labelWidth="110">-->
                        <!--<label-item label="国债产品">无</label-item>-->
                    <!--</label-container>-->
                <!--</ql-collapse-item>-->
                <!--<ql-collapse-item label="保险" value="7">-->
                    <!--<label-container column="1" [border]="true" labelWidth="110">-->
                        <!--<label-item label="保险产品">无</label-item>-->
                    <!--</label-container>-->
                <!--</ql-collapse-item>-->
                <!--<ql-collapse-item label="基金" value="8">-->
                    <!--<label-container column="1" [border]="true" labelWidth="110">-->
                        <!--<label-item label="基金产品">无</label-item>-->
                    <!--</label-container>-->
                <!--</ql-collapse-item>-->
                <!--<ql-collapse-item label="信托" value="9">-->
                    <!--<label-container column="1" [border]="true" labelWidth="110">-->
                        <!--<label-item label="信托产品">无</label-item>-->
                    <!--</label-container>-->
                <!--</ql-collapse-item>-->
              <ng-container *ngFor="let item of catalogList">
              <!--<ql-collapse-item label="{{item.catalogName}}">-->
              <!--<label-container column="1" [border]="true" labelWidth="110">-->
              <!--<label-item label="{{item.productName}}">无</label-item>-->
              <!--</label-container>-->
              <!--</ql-collapse-item>-->
                <ql-collapse-item label="{{item.catalogname}}" value="{{item.catalogno}}">
                  <ng-container *ngFor="let item2 of item.content">
                <label-container column="3" [border]="true" labelWidth="110">
                <label-item label="产品名称">{{item2.productname}}</label-item>
                <label-item label="产品代码">{{item2.productcode}}</label-item>
                <label-item label="份数">{{item2.count}}</label-item>
                </label-container>
                  </ng-container>
                </ql-collapse-item>
              </ng-container>
            </ql-collapse>
        </ql-card>
    </tab-item>
    <tab-item title="业务以及办理规则">
        <ql-card header="适用范围">
          <div [innerHTML]="groupData?.rangenotes"></div>
        </ql-card>
        <ql-card header="办理规定">
          <div [innerHTML]="groupData?.agreement"></div>
        </ql-card>
        <ql-card header="注意事项">
          <div [innerHTML]="groupData?.attentionnotes"></div>
        </ql-card>
    </tab-item>
    <tab-item title="营销垫板">
        <ql-card header="目标客户">
            <label-container column="4" [border]="true" labelWidth="160">
                <label-item label="AUM最小值">3万</label-item>
                <label-item label="AUM最大值">5万</label-item>
                <label-item label="总资产最小值">80万</label-item>
                <label-item label="总资产最小值">120万</label-item>
                <label-item label="性别">男</label-item>
                <label-item label="婚姻">已婚</label-item>
                <label-item label="年龄">30-45岁之间</label-item>
                <label-item label="学历">本科以上</label-item>
                <label-item label="客户职业">律师</label-item>
                <label-item label="所属行业">服务咨询行业</label-item>
                <label-item label="星级评价">四星</label-item>
                <label-item label="开户时间">2018-12-01</label-item>
                <label-item label="客户等级">白金客户</label-item>
                <label-item label="客户潜力值">高</label-item>
                <label-item label="理财风险">高</label-item>
                <label-item label="基金风险">低</label-item>
            </label-container>
        </ql-card>
        <ql-card header="客户分组">
            <data-table [model]="groupList">
                <ql-table-column model-key="code" label="群组编号"> </ql-table-column>
                <ql-table-column model-key="name" label="群组名称"> </ql-table-column>
                <ql-table-column model-key="description" label="群组描述"> </ql-table-column>
                <ql-table-column model-key="createTime" label="创建时间"> </ql-table-column>
                <ql-table-column model-key="creator" label="创建人"> </ql-table-column>
                <ql-table-column model-key="count" label="客户数量"> </ql-table-column>
                <ql-table-column model-key="state" label="群组状态"> </ql-table-column>
            </data-table>
        </ql-card>
        <ql-card header="产品特点">
            <label-container column="1" [border]="true" labelWidth="160">
                <label-item label="产品特点">高收益，高回报，专业理财经理一手打造，实时监控动态发展</label-item>
            </label-container>
        </ql-card>
        <ql-card header="营销策略">
            <p>1.商业银行个人理财业务风险研究</p>
            <p>2.商业银行个人理财产品创新研究</p>
            <p>3.个人理财投资的风险与规避措施分析</p>
            <p>4.基于生命周期理财理论的个人理财投资策略研究 </p>
            <p>5.银行个人理财产品的利率风险管理</p>
        </ql-card>
        <ql-card header="营销模板">
            <label-container column="3" [border]="true" labelWidth="110">
                <label-item label="模板名称">理财通用模板</label-item>
                <label-item label="创建时间">2019-08-12</label-item>
                <label-item label="创建机构">兴业高新六路支行</label-item>
                <label-item label="创建人">王文建</label-item>
                <label-item label="共享范围">支行共享</label-item>
                <label-item label="模板状态">有效</label-item>
            </label-container>
            <div ql-row>
                <div ql-col span="24" class="ql-text-right">
                    <ql-button type="text" (click)="jumpTemplate()">模板详情</ql-button>
                </div>
            </div>
        </ql-card>
    </tab-item>
    <tab-item title="促销活动">
        <ql-card header="促销活动">
            <data-table [model]="activityList">
                <ql-table-column model-key="name" label="营销活动名称"></ql-table-column>
                <ql-table-column model-key="startTime" label="活动开始时间"></ql-table-column>
                <ql-table-column model-key="endTime" label="活动结束时间"></ql-table-column>
                <ql-table-column model-key="creator" label="营销发起人"></ql-table-column>
                <ql-table-column model-key="organization" label="发起机构"></ql-table-column>
                <ql-table-column model-key="status" label="营销活动状态"></ql-table-column>
                <ql-table-column label="操作" width="250px">
                    <ng-template #slot let-scope="scope">
                        <ql-button type="text">新增</ql-button>
                        <ql-button type="text">修改</ql-button>
                        <ql-button type="text">删除</ql-button>
                    </ng-template>
                </ql-table-column>
            </data-table>
        </ql-card>
    </tab-item>
</tab-container>
